<template>
  <div class="city">
    <van-nav-bar title="标题" class="city-head">
      <template #left>
        <van-icon name="arrow-left" color="white" @click="$router.back()" />
      </template>
      <template #title>
        <div class="city-title">城市列表</div>
      </template>
    </van-nav-bar>

    <!-- v-for="(item,index) in [A-Z]" :key="index" -->
    -->
    <div class="city-list">
      <van-index-bar
        :sticky-offset-top="offset"
        :index-list="cityIndex"
        highlight-color="#21b97a"
        ref="cell"
      >
        <div v-for="(item, index) in cityIndex" :key="index">
          <van-index-anchor :index="item">
            {{ cityName[index] }}
          </van-index-anchor>
          <van-cell
            v-for="(el, ind) in citylist[item]"
            :key="ind"
            class="cname"
            @click="choose(el.label, el.value)"
            >{{ el.label }}</van-cell
          >
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
// import CityList from '@/components/city-list.vue'
// import VanIndexBar from '@/utils/vant'
import { getCityList, getHotCity } from '@/api/city'
export default {
  name: 'city-page',
  async created() {
    const { body } = await getCityList()
    console.log(body)
    body.forEach((item) => {
      // 截取首字母
      const firname = item.short[0].toUpperCase()
      // 进行一系列判断 将获得新的数组
      if (this.citylist[firname]) {
        this.citylist[firname].push(item)
      } else {
        this.citylist[firname] = [item]
      }
    })
    console.log(this.citylist)
    this.cityIndex = Object.keys(this.citylist).sort()

    // 获取热门城市
    const hot = await getHotCity()
    this.citylist['热'] = hot.body
    console.log(this.citylist)
    this.cityIndex.unshift('#', '热')
    console.log(this.cityIndex)

    this.citylist['#'] = [
      {
        label: JSON.parse(localStorage.getItem('cinfo'))
          ? JSON.parse(localStorage.getItem('cinfo')).label
          : '北京',
        value: JSON.parse(localStorage.getItem('cinfo'))
          ? JSON.parse(localStorage.getItem('cinfo')).value
          : 'AREA|88cff55c-aaa4-e2e0'
      }
    ]
    this.cityName = this.cityIndex.reduce((total, item) => {
      if (item === '#') {
        total.push('当前城市')
      } else if (item === '热') {
        total.push('热门城市')
      } else {
        total.push(item)
      }
      return total
    }, [])
    console.log(this.cityName)
  },
  mounted() {
    // this.$refs.cell.scrollTo()
    // console.log(this.$refs.cell)
  },

  data() {
    return {
      citylist: {},
      cityIndex: [],
      cityName: [],
      offset: 46
    }
  },
  methods: {
    choose(cname, cvalue) {
      const cinfo = { label: cname, value: cvalue }
      localStorage.setItem('cinfo', JSON.stringify(cinfo))
      this.$router.push('/')
    }
  },
  components: {
    // VanIndexBar
  }
}
</script>

<style scoped lang="less">
.city-head {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.city-list {
  margin-top: 46px;
}
.cname {
  font-size: 16px !important;
}
::v-deep .van-index-bar__sidebar {
  right: 0px;
  // top: 330px;
  > span {
    margin-top: 12px;
    font-size: 16px;
    // font-weight: 550;
    // font-family: '宋体';
  }
}
::v-deep .van-index-bar__index--active {
  position: relative;
  color: white !important;
  &::after {
    content: '';
    position: absolute;
    bottom: -2px !important;
    right: 17% !important;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    // transform: translateX(-50%) !important;
    background-color: #21b97a;
    z-index: -1;
  }
}
</style>
